<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>不排他 todolist</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
    <style>
      #app {
        width: 1000px;
        height: 500px;
        margin: 100px auto;
        text-align: center;
      }
      .bg {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      姓名：<input type="text" v-model="name" /> 年龄:
      <input type="number" v-model="age" /> 性别: 男<input
        type="radio"
        v-model="sex"
        value="男"
      />
      女<input type="radio" v-model="sex" value="女" />
      <button @click="add">添加</button>
      <br /><br /><br /><br />
      <table border="1" cellspacing="0" cellpadding="0" style="margin: auto">
        <tr>
          <th style="width: 100px">ID</th>
          <th style="width: 100px">姓名</th>
          <th style="width: 100px">年龄</th>
          <th style="width: 100px">性别</th>
          <th style="width: 100px">操作</th>
        </tr>
        <tr
          v-for="(item, index) in person"
          :key="item.id"
          @click="isChange(index)"
          :class="{bg:item.isChangeColor}"
        >
          <th>{{item.id}}</th>
          <th>{{item.name}}</th>
          <th>{{item.age}}</th>
          <th>{{item.sex}}</th>
          <th><button @click.stop="del(index)">删除</button></th>
        </tr>
      </table>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            person: [
              {
                id: 1,
                name: "jack",
                age: 20,
                sex: "男",
                isChangeColor: "",
              },
              { id: 2, name: "tom", age: 20, sex: "女", isChangeColor: "" },
              {
                id: 3,
                name: "jerry",
                age: 20,
                sex: "男",
                isChangeColor: "",
              },
            ],
            name: "",
            sex: "",
            age: "",
          };
        },
        methods: {
          add() {
            this.person.push({
              id: this.person.length + 1,
              name: this.name,
              age: this.age,
              sex: this.sex,
              isChangeColor: "",
            });
            this.name = "";
            this.sex = "";
            this.age = "";
          },
          del(index) {
            this.person.splice(index, 1);
          },
          isChange(index) {
            this.person[index].isChangeColor =
              !this.person[index].isChangeColor;
          },
        },
        computed: {},
        watch: {},
      }).mount("#app");
    </script>
  </body>
</html>
